<cly-drawer
  @submit="onSubmit"
  @copy="onCopy"
  :title="title"
  :saveButtonLabel="saveButtonLabel"
  v-bind="controls">
  <template v-slot:default="drawerScope">
    <cly-form-step id="conditions-drawer">
      <div class="cly-vue-drawer-step__section">
        <cly-form-field name="condition-name" v-slot="validation" :subheading="i18n('placeholder.condition-name')" :label="i18n('remote-config.condition-name')" rules="required|regex:^[a-zA-Z0-9 ]+$">
          <el-input
            v-model="drawerScope.editedObject.condition_name"
            :placeholder="i18n('remote-config.condition.name.placeholder')">
          </el-input>
          <div v-if="validation.errors.length > 0" class="text-small color-red-100 bu-pt-1">
            {{i18n('remote-config.condition-key-error')}}
          </div>
        </cly-form-field>
        <div class="bu-pt-3 bu-mt-2 bu-pb-1">
          <el-checkbox class="text-smallish"
            v-bind:label="i18n('remote-config.use.description')"
            v-model="useDescription"
            >
          </el-checkbox>
          <div class="bu-pt-3 cly-vue-remote-config-conditions-drawer" v-if="useDescription">
            <cly-form-field name="description" :label="i18n('remote-config.conditions.description')" rules="required">
              <textarea
                class="input"
                v-model="drawerScope.editedObject.condition_description"
                :placeholder="i18n('remote-config.conditions.description.placeholder')">
              </textarea>
            </cly-form-field>
          </div>
        </div>
        <div class="bu-py-4">
          <div class="text-big font-weight-bold bu-mb-1">
            {{i18n('remote-config.condition.color.tag')}}
          </div>
          <cly-color-tag :tags="colorTag"  :defaultTag="defaultTag" v-model="selectedTag"></cly-color-tag>
        </div>
        <div v-if="showSeedValue" class="bu-py-4">
          <div class="font-weight-bold text-smallish bu-mb-1">
            {{i18n('remote-config.seed')}}
          </div>
          <div class="color-cool-gray-50 text-small bu-mb-1">
            {{i18n('remote-config.seed-value-description')}}
          </div>
          <el-input
            v-model="drawerScope.editedObject.seed_value"
            :placeholder="i18n('placeholder.seed-value')">
          </el-input>
        </div>
        <div class="bu-pt-4">
          <div class="font-weight-bold text-big bu-mb-1">
            {{i18n('remote-config.condition-definition')}}
          </div>
          <div>
            <validation-provider name="condition-definition" rules="required" v-slot="v">
            <cly-qb-segmentation 
              ref="qb"
              :class="{'is-error': v.errors.length > 0}"
              :additional-properties="additionalProperties"
              :additionalRules="remoteConfigFilterRules"
              :add-empty-row-on-empty-query="true"
              :allow-breakdown="false"
              :orGroupsEnabled="true"
              v-model="managedPropertySegmentation">
            </cly-qb-segmentation>
            </validation-provider>
          </div>
        </div>
      </div>
    </cly-form-step>
  </template>
</cly-drawer>